<div class="layout-container layout-column">
    <div class="layout-main mb4j-padding-all">
        <i-form label-position="left" :label-width="120" class="form-padding">
            <form-item label="电子邮箱">
                <i-input name="email" valid="required:true,max:100" label="电子邮箱"></i-input>
            </form-item>
            <form-item label="单选框">
                <radio-group name="single">
                    <Radio label="1">
                        <Icon type="logo-apple"></Icon>
                        <span>Apple</span>
                    </Radio>
                    <Radio label="2">
                        <Icon type="logo-android"></Icon>
                        <span>Android</span>
                    </Radio>
                    <Radio label="3">
                        <Icon type="logo-windows"></Icon>
                        <span>Windows</span>
                    </Radio>
                </radio-group>
            </form-item>
            <form-item label="水果">
                <checkbox-group>
                    <Checkbox name="double" label="1"><span>香蕉</span></Checkbox>
                    <Checkbox name="double" label="2"><span>苹果</span></Checkbox>
                    <Checkbox name="double" label="3"><span>西瓜</span></Checkbox>
                </checkbox-group>
            </form-item>
            <form-item label="开关">
                <i-switch name="switch"></i-switch>
            </form-item>
            <form-item label="下拉框">
                <i-select name="selector" 
                    valid="required:true" errors="required:'请选择{*}'" html-label="下拉框">
                    <i-option value="1">选项1</i-option>
                    <i-option value="2">选项2</i-option>
                </i-select>
            </form-item>
            <form-item label="滑块">
                <Slider name="slider" :step="10" range></Slider>
            </form-item>
            <form-item label="选择日期">
                <date-picker name="date" type="date" placeholder="Select date" valid="required:true" label="选择日期"></date-picker>
            </form-item>
            <form-item label="选择日期区间">
                <date-picker name="daterange" type="daterange" placement="bottom-end" placeholder="Select date range"></date-picker>
            </form-item>
            <form-item label="选择日期时间">
                <date-picker name="datetime" type="datetime" placeholder="Select date"></date-picker>
            </form-item>
            <form-item label="选择时间">
                <time-picker name="time" type="time" placeholder="Select time" style="width: 168px" valid="required:true" label="选择时间"></time-picker>
            </form-item>
            <form-item label="数字">
                <input-number name="number" :max="10" :min="1"></input-number>
            </form-item>
            <form-item label="星星">
                <Rate name="star" allow-half />
            </form-item>
            <form-item label="颜色">
                <color-picker name="color" v-model="color" />
            </form-item>
        </i-form>
    </div>
    <div class="layout-footer">
        <i-button v-on:click="cancel">取消</i-button>
        <i-button type="primary" v-on:click="submit">提交</i-button>
    </div>
</div>